<template>
    <div class="wechat-bind" v-loading="loading">
        <h1>微信绑定</h1>
        <div id="">
            <p>通讯地址：http://www.chapiaoling.com/api/index.php/Wechat/bind?token=<span v-text="token"></span></p>
            <p>token：<span v-text="token"></span></p>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="appid" prop="appid">
                <el-input type="text" v-model="ruleForm.appid" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="appsecrect" prop="appsecrect">
                <el-input type="text" v-model="ruleForm.appsecrect" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    export default {
        name: 'WechatBind',
        data() {
            return {
                loading: false,
                apiUrl: apiUrl,
                token: 'dfd',
                ruleForm: {
                    appid: '',
                    appsecrect: '',
                },
                rules: {
                    appid: [
                        {required: true, message: '请输入appid', trigger: 'blur'}
                    ],
                    appsecrect: [
                        {required: true, message: '请输入appsecrect', trigger: 'blur'}
                    ],
                }
            };
        },
        mounted () {
            this.$nextTick(function () {
                this.load();//概况
            })
        },
        methods: {
            //概况数据获取
            load() {
                var _this = this;
                this.$http.get(this.apiUrl + 'Wechat/bind')
                    .then(function (response) {
                        _this.loading = false;
                        _this.ruleForm.appid = response.data.appid;
                        _this.ruleForm.appsecrect = response.data.appsecrect;
                        _this.token = response.data.token;
                        console.log(response.data);
                    }).catch(function (response) {
                    console.log(response);
                    });
            },
            submitForm(formName) {

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.$http.post(this.apiUrl + 'Wechat/bind', {
                            appid: this.ruleForm.appid,
                            appsecrect: this.ruleForm.appsecrect
                        }).then(response => {
                            this.loading = false;
                            if(response.data.status==1){
                                this.$message.success('保存成功');
                            }else{
                                this.$message.error('保存失败');
                            }
                        }, response => {
                            this.$message.error('保存失败');
                            console.log(response);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
